<template>
    <div>
        <el-card shadow="hover" :body-style="{padding: '0px'}">
            <div class="card-box clearfix">
                <div slot="header" class="clearfix card-title">
                    <span>{{managermentKeepAccounts.name}}</span>
                    <el-button class="btn-more" type="text">更多 <i class="el-icon-d-arrow-right"></i></el-button>
                </div>
                <div class="account-box" style="padding:0px 10px 10px 10px;">
                    <div class="account-content" :style="{backgroundImage:'url('+accountBlue+')'}">
                        <div v-for="(index,a) in accountList" :key="accountList[a].id" class="accountListPart" >
                          <div class="accountList">
                              <span class="accountListName">{{accountList[a].accountListName}}</span>
                              <span class="accountListNub">{{accountList[a].accountListNub}}</span>
                          </div>
                        </div>
                    </div>
                    <div class="account-content-line" :style="{backgroundImage:'url('+accountGreen+')'}">
                      <div class="accountListLine" >
                          <span class="accountAllDataName">{{accountAllData[0]&&accountAllData[0].name}}</span>
                          <span class="accountAllDataNub" style="color:#00cc66">{{accountAllData[0]&&accountAllData[0].number}}</span>
                      </div>
                      <div class="accountListLine" >
                          <span class="accountAllDataName">{{accountAllData[1]&&accountAllData[1].name||''}}</span>
                          <span class="accountAllDataNub" style="color:#00cc66;width:12%">{{accountAllData[1]&&accountAllData[1].number}}</span>
                      </div>
                        <!-- <div v-for="(index,m) in accountAllData" :key="accountAllData[m].id" >
                          <div class="accountListLine" >
                              <span class="accountAllDataName">{{accountAllData[m].name}}</span>
                              <span class="accountAllDataNub" style="color:#00cc66">{{accountAllData[m].number}}</span>
                          </div>
                        </div> -->
                    </div>
                </div>
            </div>   
        </el-card>
    </div>
</template>

<script>
import { managermentKeepAccounts } from './data/Content.js';

export default {
    name: 'ManagermentKeepAccounts',
    data () {
        return {
            managermentKeepAccounts: managermentKeepAccounts, 
            accountList:[],
            accountAllData:[], 
            accountBlue: require('@/assets/img/component/accountBlue.png'), 
            accountGreen: require('@/assets/img/component/accountGreen.png'),    
        };
    },
    created(){
        console.log(managermentKeepAccounts);
        this.getInit();
    },
    methods: {
        getInit(){
            this.$axios.get(managermentKeepAccounts.url).then((res) => {
                this.accountList = res.data[0].accountList;
                this.accountAllData = res.data[0].accountAllData;
                
            });
        },
    },
};
</script>

<style lang="scss" scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .account-content{
    margin-bottom: 10px;
  }
  .accountListPart{
    width: 100%;
  }
  .accountList{
    width: 100%;
    height: 30px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
  }
  .accountListName{
    display: inline-block;
    width: 60%;
    text-align: left;
    padding-left: 20px;
  }
  .accountListNub{
    display: inline-block;
    color:#0066ff ;
  }
  .account-content-line{
      height: 50px;
  }
  .accountListLine{
    width: 50%;
    float: left;
    line-height: 50px;
    
  }
  .accountAllDataName{
    width: 80%;
    display: inline-block;
    text-align: left;
    text-indent: 20px;
  }
  .accountAllDataNub{
    display: inline-block;
    width: 20%;
    text-align: center;
  }
</style>
